import React, { useEffect, useContext, useState } from 'react'
import { getFoods ,getOders} from '../api/order'
import { GlobalContext } from '../index'
import './index.css'


export default function Foods() {

  // const foods = getFoods();
  const {name} = useContext(GlobalContext);//上下文通信

  //菜单分类
  const [sort, setSort] = useState([]);

  //用户点餐信息
  const [orders, setOrders] = useState([]);

  //用户点餐数量
  const [ordersNumber,setOrdersNumber] = useState({});

  const [listen, setListen] = useState(0);

  //分类是否打印

  const [foodsArr,setFoodsArr] = useState([]);;

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(async () => {
    const { data } = await getFoods();
    const { data:orders } = await getOders();
    
    // setDishes(data.data)
    data.data.categoryList.forEach(dish => {foodsArr.push({ id: dish.id, name: dish.name, foodLish:[] })})
    foodsArr.forEach((dish, i) => {dish.foodLish.push(data.data.foodList.filter((v) => v.categoryId === i + 1))})

    setFoodsArr(foodsArr)
    setOrders(orders)
    setSort(data.data.categoryList);
    }, [])

    


    for (let i in orders.data){
      if(i===name){
        setOrders(orders.data[name])
        setOrdersNumber(orders.data[name])
      }
    }


    //添加
    const onClickFoodsAdd=(id,number)=>{
      if(number<99){
        setListen(listen + 1);
        
         ordersNumber[id]=number+1
        //  console.log(ordersNumber);
         setOrdersNumber(ordersNumber)
      }
        
    }
    //减少
    const onClickFoodsReduce=(id,number)=>{
        if(number>0){
          setListen(listen - 1);
          ordersNumber[id]=number-1
         setOrdersNumber(ordersNumber)
          // console.log(ordersNumber)
        }
    }

    return (
      
      <div className="menus">
        <div className="menu-sort">
          {sort.map(item => {
            return <div id={item.id} key={item.id}>{item.name}</div>
          })}
        </div>
        {/* <p>{listen}</p> */}
        <div className="menu-dishes">
          {foodsArr&&foodsArr.map((item) =>{
            // console.log(item.foodLish[0])
              return <div key={item.id}>
                        <div>{item.name}</div>
                            {item.foodLish[0].map((food,index) => {
                              // console.log(food)
                              return <div key={food.id} className="menu-dishes-item">
                                    <div ><img src={food.image} className="food-img" alt={food.name} style={{}}></img></div>
                                    <div>
                                      <div className="menu-name">{food.name}</div>
                                      <div className="menu-price">￥{food.price}</div>
                                    </div>

                                    <div className="menu-number">
                                      <div className="menu-number-button">
                                      <button onClick={() => onClickFoodsReduce(food.id,ordersNumber[food.id])}>-</button>
                                          
                                       {ordersNumber[food.id]>0?<span style={{color: 'red'}}>{ordersNumber[food.id]}</span>:<span>0</span>}
                                      <button onClick={() => onClickFoodsAdd(food.id,ordersNumber[food.id])}>+</button>
                                      </div>
                                      

                                    </div>

                              </div>
                              
                            })}
              
              </div>
              
              
          })
          }




        </div>
      </div>
    )
  }